<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ title?: string; content?: string }>(), {
  title: 'Card Title',
  content: 'Hello Storybook',
});
</script>

<style scoped lang="scss">
.card {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 16px;
  background: #fff;
  width: 200px;
  h3 { margin: 0 0 8px 0; font-size: 16px; }
  p  { margin: 0; color: #606266; }
}
</style>